@import "sidebar-aside"

.widget
  @extend $base-style
  line-height: line-height
  word-wrap: break-word
  font-size: 0.9em
  ul, ol
    list-style: none
    margin: 0
    ul, ol
      margin: 0 20px
    ul
      list-style: disc
    ol
      list-style: decimal

$widget-nav-link
  height: 40px
  display: flex
  align-items: center
  justify-content: space-between
  color: var(--btn-text-neutral-text) !important
  font-weight: medium
  border-radius: inner-radius
  padding-left: 0
  padding-right: 8px
  padding-left: 8px

  transition: background trans-style, color trans-style, padding trans-style
  &:hover
    padding-left: 12px
    background: var(--btn-text-hover)
    color: var(--btn-text-light-text) !important
  &:active
    background: var(--btn-text-active)


$widget-nav-count
  height: 28px
  width: 32px
  color: var(--text-on-light)
  background: var(--badge-bg)
  display: flex
  align-items: center
  justify-content: center
  border-radius: inner-radius
  font-size: 14px
  font-weight: bold
  transition: background trans-style, color trans-style


.category-link
  @extend $widget-nav-link
  .category-count
    @extend $widget-nav-count

.children
  margin-left: 12px

.category-box
  display: flex
  flex-direction: column

.archive-link
  @extend $widget-nav-link
  .archive-count
    @extend $widget-nav-count

.recent-link
  @extend $widget-nav-link
  .recent-link-text
    text-wrap: nowrap
    text-overflow: ellipsis
    overflow: hidden  